<template>
  <div>
    <a-modal
      title="新增角色"
      :visible="dialogVisible"
      :confirm-loading="confirmLoading"
      width="600px"
      okText="确定"
      cancelText="取消"
      @cancel="handleCancel"
      :footer="false"
    >
      <a-form :form="form" :labelCol="{ span: 4 }" @submit="handleAdd">
        <a-row>
          <a-col :span="24">
            <a-form-item label="角色名称">
              <a-input
                v-decorator="[
                  'name',
                  { rules: [{ required: true, message: '' }] },
                ]"
                style="width: 80%"
                autocomplete="off"
              >
              </a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-item label="权限标识">
              <a-input
                v-decorator="[
                  'value',
                  { rules: [{ required: true, message: '' }] },
                ]"
                style="width: 80%"
                autocomplete="off"
              >
              </a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-item label="权限菜单" :wrapperCol="{ span: 16 }">
              <div>
                <a-tree
                  checkable
                  :checkedKeys="checkedKeys"
                  :defaultExpandAll="true"
                  :tree-data="treeData"
                  @check="onCheck"
                >
                </a-tree>
              </div>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-item style="margin: 0 15px">
              <a-button type="primary" html-type="submit" block>确定</a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { addRole } from "@/api/system/role";
import { queryMenuList } from "@/api/system/menu";

export default {
  name: "RoleAddDialog",
  data() {
    return {
      dialogVisible: this.$store.getters.dialogAddVisible.role,
      confirmLoading: false,
      form: this.$form.createForm(this),
      treeData: [],
      checkedKeys: [],
    };
  },
  watch: {
    "$store.getters.dialogAddVisible.role": function (nv) {
      this.dialogVisible = nv;
      queryMenuList().then(({ data }) => {
        let target = data.map((i) => this.mapTree(i));
        this.treeData = [
          {
            title: "顶层菜单",
            key: "top",
            value: "top",
            children: target,
          },
        ];
      });
    },
  },
  methods: {
    mapTree(tree) {
      const haveChildren = tree.children.length > 0;
      return {
        title: tree.name,
        key: tree.key,
        value: tree.key,
        children: haveChildren && tree.children.map(i => this.mapTree(i))
      }
    },
    onCheck(checkedKeys) {
      this.checkedKeys = checkedKeys;
    },
    handleAdd(e) {
      e.preventDefault();
      if (!this.checkedKeys.length) {
        this.$message.warning("请选择权限菜单！");
        return;
      }
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          console.log(values);
          values.menus = this.checkedKeys;
          addRole(values).then((res) => {
            if (res.data.success) {
              this.$message.success("新增成功！");
              this.$emit("success");
              this.handleCancel();
            } else {
              let msg = res.data.show ? res.data.msg : '';
              this.$message.error("新增失败！" + msg);
              console.log(res.data.msg);
            }
          });
        }
      });
    },
    handleCancel() {
      this.form.resetFields();
      this.$store.dispatch("SetAddVisible", [false, "role"]);
      this.checkedKeys = [];
    },
  },
};
</script>